<template>
    <el-dialog :title="title" width="700px" :visible.sync="openFormData.formVisible">
      <el-form  :model="openFormData.formData" :rules="openFormData.formRules" ref="openFormData.formData">
          <template v-for="formField in openFormData.formFields">
                <el-form-item v-bind:style="{ display:formField.isDisplay!=true?'none':'inline-block','vertical-align':'top',width: formField.widthPercentage == null?'50%':formField.widthPercentage+'%'}" :prop="formField.name" :key="formField.id" :label="formField.label" :label-width="openFormData.formLabelWidth">
                    <template v-if="formField.control=='switch'">
                        <el-switch
                            :readonly="!formField.isEdit"
                            v-model="openFormData.formData[formField.name]"
                            active-color="#13ce66"
                            inactive-color="#ff4949">
                        </el-switch>
                    </template>
                    <template v-else-if="formField.control=='select'">
                        <el-select 
                            :disabled="!formField.isEdit"
                            v-model="openFormData.formData[formField.name]"
                            placeholder="请选择">
                            <el-option
                                v-for="item in formField.extList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </template>
                    <template v-else-if="formField.control=='textarea'">
                        <el-input
                            :readonly="!formField.isEdit"
                            type="textarea"
                            :rows="2"
                            placeholder="请输入内容"
                            v-model="openFormData.formData[formField.name]">
                        </el-input>
                    </template>
                    <template v-else-if="formField.control=='datePicker'">
                        <el-date-picker
                            :disabled="!formField.isEdit"
                            v-model="openFormData.formData[formField.name]"
                            :type="formField.extList[0].value"
                            placeholder="选择日期">
                        </el-date-picker>
                    </template>
                    <template v-else-if="formField.control=='selectItemTag'">
                        <el-input
                            :disabled="!formField.isEdit"
                            placeholder="请选择"
                            suffix-icon="el-icon-search"
                            v-model="openFormData.formData[formField.name]" 
                            autocomplete="off"
                            @focus="selectItemTagClick(formField.extList, formField.name)">
                        </el-input>
                    </template>
                    
                    <template v-else>
                        <el-input 
                            :readonly="!formField.isEdit"
                            v-model="openFormData.formData[formField.name]" 
                            autocomplete="off"></el-input>
                    </template>
                </el-form-item>
          </template>
      </el-form>
      <div slot="footer" class="dialog-footer">
            <el-button @click="openFormData.formVisible = false">取 消</el-button>
            <el-button type="primary" @click="onSubmit('openFormData.formData')">确 定</el-button>
      </div>
      <selectItemTag :time.sync="time" ref="selectItemTag" @selectItemResp="selectItemResp"></selectItemTag>
    </el-dialog>
</template>
<script>
    import ltshFrame from "@/../static/js/ltshFrame";
    import selectItemTag from "./selectItemTag.vue";
    export default {
        data() {
            return {
                openFormData: {
                    formVisible:false,
                    formData:{},
                    formRules: {},
                    formFields:[],
                    formLabelWidth:'120px',
                },
                time:'',
                title:'',
                init:false
            }
        },
        methods: {
            toJson(str) {
                return JSON.parse(str);
            },
            handleClick(fun, row) {
                var _this = this;
                if(fun.type==1) {
                    if(fun.code=='ADD') {
                        ltshFrame.openFormDialog(_this.url, row, _this, _this.addDefaultValues);
                    } else if(fun.code=='EDIT') {
                        ltshFrame.openFormDialog(_this.url, row, _this);
                    } else if(fun.code=='DEL') {
                        ltshFrame.delItem(_this.url, row, _this);
                    }
                } else {
                    _this.$emit('handleClick', row, fun);
                }
            },
            selectItemTagClick(extList, fieldName) {
                var _this = this;
                var dialogObject = {formVisible:true,title:'选择'};
                _this.$refs.selectItemTag.setTagData(extList[0], dialogObject, fieldName);
            },
            selectItemResp(_resData) {
                var _this = this;
                _this.openFormData.formData[_resData.fieldName] = _resData.name;
                var fieldId = _resData.fieldName.substr(0,_resData.fieldName.lastIndexOf('Name')) + 'Id';
                _this.openFormData.formData[fieldId] = _resData.id;
                _this.$refs['openFormData.formData'].clearValidate();
            },
            onSubmit(formName) {
                var _this = this;
                _this.$refs[formName].validate((valid) => {
                    if (valid) {
                       _this.myUtils.appRequest({
                            url: _this.url + '/saveOrUpdate',
                            method:'post',
                            data:_this.openFormData.formData,
                            callback:function(data) {
                                _this.openFormData.formVisible = false;
                                _this.$message({
                                    showClose: true,
                                    message: data.message,
                                    type: 'success'
                                });
                                _this.$emit('loadData');
                            },
                            catch: function(res) {
                                console.log(res);
                            }
                        }, _this);
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
                
                

            },
            showForm() {
                var _this = this;
                if(_this.init)  {
                    _this.$refs['openFormData.formData'].resetFields();
                }
                _this.openFormData.formVisible = true;
                _this.init = true;
            }
        },
        props:['url', 'addDefaultValues'],
        components: { selectItemTag }
    }
</script>
<style>
.my-form-inline {
    display:'inline-block';
    vertical-align:'top';
}
.el-form--inline .form-item {
    width:50%;margin-right:0;
}
.el-form--inline .hide{
    display:none;
}
.el-input--suffix .el-input__inner{
    padding-right:15px;
}
.el-date-editor.el-input--suffix .el-input__inner{
    padding-right:0px;
}
.el-date-editor.el-input, .el-date-editor.el-input__inner{
    width:auto;
}
</style>